<script src="../../router/index.js"></script>
<template>
  <div id="shops" name="">
    <van-grid :gutter="5" :column-num="2">
      <van-grid-item v-for="item in list" @click="detail(item)">
        <van-image :src="item.imgPath"/>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
export default {
  name: '',
  props: {},
  data() {
    return {list: [], lists: []};
  },
  // 子组件转换
  components: {},
  // 数据引入
  mounted() {
    this.$axios({
      method: 'get',
      url: 'http://api.com/index'
    }).then((response) => {
      this.list = response.data.section1.list;
      // console.log(this.list)
    }).catch(function (error) {
      alert(error)
    })
  },
  methods: {
    detail(item) {
      // console.log(item)
      this.$router.push({
        path: '/details',
        query: item
      })
    }
  },
}
</script>
<style lang="scss" scoped>
/deep/ {
  .van-grid-item__content {
    padding: 0;
  }
}

#shops {
  height: 100%;
}
</style>